﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage/Content.Master" AutoEventWireup="true" CodeBehind="OverPhoto.aspx.cs" Inherits="RED_NET.ContentPage.OverPhoto" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
 <link href="../JavaScript/photo.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        var arrImage = new Array();
        var title = new Array();
        var i = 0;
        var j = 0;

        title[0] = "1";
        title[1] = "2";
        title[2] = "3";
        title[19] = "20";


        arrImages = "<%=arrImages%>"; //获取后台cs代码的属性
        arrImage = arrImages.split(",");
/*
        arrImage[0] = "../JavaScript/images/1.jpg";
        arrImage[1] = "../JavaScript/images/2.jpg";
        arrImage[2] = "../JavaScript/images/3.jpg";
        arrImage[3] = "../JavaScript/images/4.jpg";
        arrImage[4] = "../JavaScript/images/5.jpg";
        arrImage[5] = "../JavaScript/images/6.jpg";
        arrImage[6] = "../JavaScript/images/7.jpg";
        arrImage[7] = "../JavaScript/images/8.jpg";
        arrImage[8] = "../JavaScript/images/9.jpg";
        arrImage[9] = "../JavaScript/images/10.jpg";
        arrImage[10] = "../JavaScript/images/11.jpg";
        arrImage[11] = "../JavaScript/images/12.jpg";
        arrImage[12] = "../JavaScript/images/13.jpg";
        arrImage[13] = "../JavaScript/images/4.jpg";
        arrImage[14] = "../JavaScript/images/5.jpg";
        arrImage[15] = "../JavaScript/images/6.jpg";
        arrImage[16] = "../JavaScript/images/7.jpg";
        arrImage[17] = "../JavaScript/images/8.jpg";
        arrImage[18] = "../JavaScript/images/9.jpg";
        arrImage[19] = "../JavaScript/images/10.jpg";
*/

        var imf = function() {
            var lf = 0;
            var instances = [];
            function getElementsByClass(object, tag, className) {
                var o = object.getElementsByTagName(tag);
                for (var i = 0, n = o.length, ret = []; i < n; i++)
                    if (o[i].className == className) ret.push(o[i]);
                if (ret.length == 1) ret = ret[0];
                return ret;
            }
            function addEvent(o, e, f) {
                if (window.addEventListener) o.addEventListener(e, f, false);
                else if (window.attachEvent) r = o.attachEvent('on' + e, f);
            }
            function createReflexion(cont, img) {
                var flx = false;
                if (document.createElement("canvas").getContext) {
                    flx = document.createElement("canvas");
                    flx.width = img.width;
                    flx.height = img.height;
                    var context = flx.getContext("2d");
                    context.translate(0, img.height);
                    context.scale(1, -1);
                    context.drawImage(img, 0, 0, img.width, img.height);
                    context.globalCompositeOperation = "destination-out";
                    var gradient = context.createLinearGradient(0, 0, 0, img.height * 2);
                    gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
                    gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
                    context.fillStyle = gradient;
                    context.fillRect(0, 0, img.width, img.height * 2);
                } else {
                    /* ---- DXImageTransform ---- */
                    flx = document.createElement('img');
                    flx.src = img.src;
                    flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' +
			                   'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +
							   (img.height * .25) + ')';
                }
                /* ---- insert Reflexion ---- */
                flx.style.position = 'absolute';
                flx.style.left = '-1000px';
                cont.appendChild(flx);
                return flx;
            }
            /* //////////// ==== ImageFlow Constructor ==== //////////// */
            function ImageFlow(oCont, size, zoom, border) {
                this.diapos = [];
                this.scr = false;
                this.size = size;
                this.zoom = zoom;
                this.bdw = border;
                this.oCont = oCont;
                this.oc = document.getElementById(oCont);
                this.scrollbar = getElementsByClass(this.oc, 'div', 'scrollbar');
                this.text = getElementsByClass(this.oc, 'div', 'text');
                this.title = getElementsByClass(this.text, 'div', 'title');
                this.legend = getElementsByClass(this.text, 'div', 'legend');
                this.bar = getElementsByClass(this.oc, 'img', 'bar');
                this.arL = getElementsByClass(this.oc, 'img', 'arrow-left');
                this.arR = getElementsByClass(this.oc, 'img', 'arrow-right');
                this.bw = this.bar.width;
                this.alw = this.arL.width - 5;
                this.arw = this.arR.width - 5;
                this.bar.parent = this.oc.parent = this;
                this.arL.parent = this.arR.parent = this;
                this.view = this.back = -1;
                this.resize();
                this.oc.onselectstart = function() { return false; }
                /* ---- create images ---- */
                var img = getElementsByClass(this.oc, 'div', 'bank').getElementsByTagName('a');
                this.NF = img.length;
                for (var i = 0, o; o = img[i]; i++) {
                    this.diapos[i] = new Diapo(this, i,
										o.rel,
										o.title || '- ' + i + ' -',
										o.innerHTML || o.rel,
										o.href || '',
										o.target || '_self'
			);
                }
                /* ==== add mouse wheel events ==== */
                if (window.addEventListener)
                    this.oc.addEventListener('DOMMouseScroll', function(e) {
                        this.parent.scroll(-e.detail);
                    }, false);
                else this.oc.onmousewheel = function() {
                    this.parent.scroll(event.wheelDelta);
                }
                /* ==== scrollbar drag N drop ==== */
                this.bar.onmousedown = function(e) {
                    if (!e) e = window.event;
                    var scl = e.screenX - this.offsetLeft;
                    var self = this.parent;
                    /* ---- move bar ---- */
                    this.parent.oc.onmousemove = function(e) {
                        if (!e) e = window.event;
                        self.bar.style.left = Math.round(Math.min((self.ws - self.arw - self.bw), Math.max(self.alw, e.screenX - scl))) + 'px';
                        self.view = Math.round(((e.screenX - scl)) / (self.ws - self.alw - self.arw - self.bw) * self.NF);
                        if (self.view != self.back) self.calc();
                        return false;
                    }
                    /* ---- release scrollbar ---- */
                    this.parent.oc.onmouseup = function(e) {
                        self.oc.onmousemove = null;
                        return false;
                    }
                    return false;
                }
                /* ==== right arrow ==== */
                this.arR.onclick = this.arR.ondblclick = function() {
                    if (this.parent.view < this.parent.NF - 1)
                        this.parent.calc(1);
                }
                /* ==== Left arrow ==== */
                this.arL.onclick = this.arL.ondblclick = function() {
                    if (this.parent.view > 0)
                        this.parent.calc(-1);
                }
            }
            /* //////////// ==== ImageFlow prototype ==== //////////// */
            ImageFlow.prototype = {
                /* ==== targets ==== */
                calc: function(inc) {
                    if (inc) this.view += inc;
                    var tw = 0;
                    var lw = 0;
                    var o = this.diapos[this.view];
                    if (o && o.loaded) {
                        /* ---- reset ---- */
                        var ob = this.diapos[this.back];
                        if (ob && ob != o) {
                            ob.img.className = 'diapo';
                            ob.z1 = 1;
                        }
                        /* ---- update legend ---- */
                        this.title.replaceChild(document.createTextNode(o.title), this.title.firstChild);
                        this.legend.replaceChild(document.createTextNode(o.text), this.legend.firstChild);
                        /* ---- update hyperlink ---- */
                        if (o.url) {
                            o.img.className = 'diapo link';
                            window.status = 'hyperlink: ' + o.url;
                        } else {
                            o.img.className = 'diapo';
                            window.status = '';
                        }
                        /* ---- calculate target sizes & positions ---- */
                        o.w1 = Math.min(o.iw, this.wh * .7) * o.z1;
                        var x0 = o.x1 = (this.wh * .5) - (o.w1 * .5);
                        var x = x0 + o.w1 + this.bdw;
                        for (var i = this.view + 1, o; o = this.diapos[i]; i++) {
                            if (o.loaded) {
                                o.x1 = x;
                                o.w1 = (this.ht / o.r) * this.size;
                                x += o.w1 + this.bdw;
                                tw += o.w1 + this.bdw;
                            }
                        }
                        x = x0 - this.bdw;
                        for (var i = this.view - 1, o; o = this.diapos[i]; i--) {
                            if (o.loaded) {
                                o.w1 = (this.ht / o.r) * this.size;
                                o.x1 = x - o.w1;
                                x -= o.w1 + this.bdw;
                                tw += o.w1 + this.bdw;
                                lw += o.w1 + this.bdw;
                            }
                        }
                        /* ---- move scrollbar ---- */
                        if (!this.scr && tw) {
                            var r = (this.ws - this.alw - this.arw - this.bw) / tw;
                            this.bar.style.left = Math.round(this.alw + lw * r) + 'px';
                        }
                        /* ---- save preview view ---- */
                        this.back = this.view;
                    }
                },
                /* ==== mousewheel scrolling ==== */
                scroll: function(sc) {
                    if (sc < 0) {
                        if (this.view < this.NF - 1) this.calc(1);
                    } else {
                        if (this.view > 0) this.calc(-1);
                    }
                },
                /* ==== resize  ==== */
                resize: function() {
                    this.wh = this.oc.clientWidth;
                    this.ht = this.oc.clientHeight;
                    this.ws = this.scrollbar.offsetWidth;
                    this.calc();
                    this.run(true);
                },
                /* ==== move all images  ==== */
                run: function(res) {
                    var i = this.NF;
                    while (i--) this.diapos[i].move(res);
                }
            }
            /* //////////// ==== Diapo Constructor ==== //////////// */
            Diapo = function(parent, N, src, title, text, url, target) {
                this.parent = parent;
                this.loaded = false;
                this.title = title;
                this.text = text;
                this.url = url;
                this.target = target;
                this.N = N;
                this.img = document.createElement('img');
                this.img.src = src;
                this.img.parent = this;
                this.img.className = 'diapo';
                this.x0 = this.parent.oc.clientWidth;
                this.x1 = this.x0;
                this.w0 = 0;
                this.w1 = 0;
                this.z1 = 1;
                this.img.parent = this;
                this.img.onclick = function() { this.parent.click(); }
                this.parent.oc.appendChild(this.img);
                /* ---- display external link ---- */
                if (url) {
                    this.img.onmouseover = function() { this.className = 'diapo link'; }
                    this.img.onmouseout = function() { this.className = 'diapo'; }
                }
            }
            /* //////////// ==== Diapo prototype ==== //////////// */
            Diapo.prototype = {
                /* ==== HTML rendering ==== */
                move: function(res) {
                    if (this.loaded) {
                        var sx = this.x1 - this.x0;
                        var sw = this.w1 - this.w0;
                        if (Math.abs(sx) > 2 || Math.abs(sw) > 2 || res) {
                            /* ---- paint only when moving ---- */
                            this.x0 += sx * .1;
                            this.w0 += sw * .1;
                            if (this.x0 < this.parent.wh && this.x0 + this.w0 > 0) {
                                /* ---- paint only visible images ---- */
                                this.visible = true;
                                var o = this.img.style;
                                var h = this.w0 * this.r;
                                /* ---- diapo ---- */
                                o.left = Math.round(this.x0) + 'px';
                                o.bottom = Math.floor(this.parent.ht * .25) + 'px';
                                o.width = Math.round(this.w0) + 'px';
                                o.height = Math.round(h) + 'px';
                                /* ---- reflexion ---- */
                                if (this.flx) {
                                    var o = this.flx.style;
                                    o.left = Math.round(this.x0) + 'px';
                                    o.top = Math.ceil(this.parent.ht * .75 + 1) + 'px';
                                    o.width = Math.round(this.w0) + 'px';
                                    o.height = Math.round(h) + 'px';
                                }
                            } else {
                                /* ---- disable invisible images ---- */
                                if (this.visible) {
                                    this.visible = false;
                                    this.img.style.width = '0px';
                                    if (this.flx) this.flx.style.width = '0px';
                                }
                            }
                        }
                    } else {
                        /* ==== image onload ==== */
                        if (this.img.complete && this.img.width) {
                            /* ---- get size image ---- */
                            this.iw = this.img.width;
                            this.ih = this.img.height;
                            this.r = this.ih / this.iw;
                            this.loaded = true;
                            /* ---- create reflexion ---- */
                            this.flx = createReflexion(this.parent.oc, this.img);
                            if (this.parent.view < 0) this.parent.view = this.N;
                            this.parent.calc();
                        }
                    }
                },
                /* ==== diapo onclick ==== */
                click: function() {
                    if (this.parent.view == this.N) {
                        /* ---- click on zoomed diapo ---- */
                        if (this.url) {
                            /* ---- open hyperlink ---- */
                            window.open(this.url, this.target);
                        } else {
                            /* ---- zoom in/out ---- */
                            this.z1 = this.z1 == 1 ? this.parent.zoom : 1;
                            this.parent.calc();
                        }
                    } else {
                        /* ---- select diapo ---- */
                        this.parent.view = this.N;
                        this.parent.calc();
                    }
                    return false;
                }
            }
            /* //////////// ==== public methods ==== //////////// */
            return {
                /* ==== initialize script ==== */
                create: function(div, size, zoom, border) {
                    /* ---- instanciate imageFlow ---- */
                    var load = function() {
                        var loaded = false;
                        var i = instances.length;
                        while (i--) if (instances[i].oCont == div) loaded = true;
                        if (!loaded) {
                            /* ---- push new imageFlow instance ---- */
                            instances.push(
						new ImageFlow(div, size, zoom, border)
					);
                            /* ---- init script (once) ---- */
                            if (!imf.initialized) {
                                imf.initialized = true;
                                /* ---- window resize event ---- */
                                addEvent(window, 'resize', function() {
                                    var i = instances.length;
                                    while (i--) instances[i].resize();
                                });
                                /* ---- stop drag N drop ---- */
                                addEvent(document.getElementById(div), 'mouseout', function(e) {
                                    if (!e) e = window.event;
                                    var tg = e.relatedTarget || e.toElement;
                                    if (tg && tg.tagName == 'HTML') {
                                        var i = instances.length;
                                        while (i--) instances[i].oc.onmousemove = null;
                                    }
                                    return false;
                                });
                                /* ---- set interval loop ---- */
                                setInterval(function() {
                                    var i = instances.length;
                                    while (i--) instances[i].run();
                                }, 16);
                            }
                        }
                    }
                    /* ---- window onload event ---- */
                    addEvent(window, 'load', function() { load(); });
                }
            }
        } ();

        /* ==== create imageFlow ==== */
        //          div ID    , size, zoom, border
        imf.create("imageFlow", 0.15, 1.5, 10);


        document.write('<div id="container">');
        document.write('<div class="area">');
        document.write('<div id="imageFlow">');
        document.write('<div class="bank" id="samples_list">');
        for (i = 0; i < arrImage.length; i++) {
            j = i + 1;
            document.write('<a rel=\"' + arrImage[i] + '\" title=\"' + title[i] + '\" id="picture' + i + '" > ' + j + '/' + arrImage.length + '</a>');
        }
        document.write('</div>');
        document.write('<div class="text">');
        document.write('<div class="title">Loading</div>');
        document.write('<div class="legend">Please wait...</div>');
        document.write('</div>');
        document.write('<div class="scrollbar">');
        document.write('<img class="track" src="../JavaScript/images/sb.gif" alt="">');
        document.write('<img class="arrow-left" src="../JavaScript/images/sl.gif" alt="">');
        document.write('<img class="arrow-right" src="../JavaScript/images/sr.gif" alt="">');
        document.write('<img class="bar" src="../JavaScript/images/sc.gif" alt="">');
        document.write('</div>');
        document.write('</div>');
        document.write('</div>');
        document.write('</div>');

</script>
<!--
    <div class="EAndD">
        <div class="Addtu4"></div>
        <div class="Addtu2"></div>
        <div class="Text_Left"  id="PName">
            <asp:Button ID="Button3" runat="server" Text="编辑该相片" onclick="Button3_Click" 
                Width="90px" Height="23px" />
            &nbsp;&nbsp;
            <asp:Button ID="Button4" runat="server" Text="删除该相片" onclick="Button4_Click" 
                Width="90px" Height="23px" />
        </div>
        <div class="Text_Left" ><asp:Image ID="Image1" runat="server" />
        </div>
      &nbsp;<div class="Text_Left" >
        <asp:Button ID="Button1" runat="server" Text="上一张" onclick="Button1_Click" 
                Width="90px" Height="23px" />
        &nbsp;&nbsp;
        <asp:Button ID="Button2" runat="server" Text="下一张" onclick="Button2_Click" 
                Width="90px" Height="23px" />
      </div>
    </div>
    -->
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder3" runat="server">
</asp:Content>
